<template>
	<view class="content">
		<view class="header">
			<view class="header_top">
				<image src="../../../../static/my/goodsimg.png" mode=""></image>
				<text>希点教育</text>
			</view>
			<view class="header_bottom">
				<view class="header_bottom_xl">
					累计销量：22144件
				</view>
				<view class="header_bottom_xs">
					累计销售额：11645536.84元
				</view>
			</view>
		</view>
		<view class="search">
			<view class="search_top">
				<view class="search_top_left">
					<image src="../../../../static/home/search.png" mode=""></image>
					<input type="text" value="" placeholder="搜索" />
				</view>
				<view class="search_top_right">
					<image src="../../../../static/my/sx.png" mode=""></image>
				</view>
			</view>

			<view class="search_bottom">
				<view class="search_bottom_type" @click="qiehuan(1)" :class="qh_id==1?'acticee':''">
					<text>综合排序</text>
				</view>
				<view class="search_bottom_type" @click="qiehuan(2)" :class="qh_id==2?'acticee':''">
					<text>销量优先</text>
				</view>
				<view class="search_bottom_type" @click="qiehuan(3)" :class="qh_id==3?'acticee':''">
					<text>价格</text>
				</view>
			</view>
		</view>
		<view class="goods_list" v-for="(item,index) in goodslist" @click="xq(item)">
			<view class="goods_list_left">
				<image :src="item.goodsimg" mode=""></image>
			</view>
			<view class="goods_list_right">
				<view class="goods_list_right_top">
					<text>{{item.goodsname}}</text>
				</view>
				<view class="goods_list_right_bottom">
					￥<text>{{item.goodsprice}}</text>
				</view>
			</view>
		</view>
		<view class="dibu_two_icon">
			<view class="item">
				<image src="/static/xinjia-tu/icon1.png" style=" width: 48rpx;height: 48rpx;" mode=""></image>
				<text>正在售卖</text>
			</view>
			<view class="item" @click="jieshao">
				<image src="/static/xinjia-tu/icon2.png" style=" width: 48rpx;height: 48rpx;" mode=""></image>
				<text style="color: #6E7480;">店铺介绍</text>
			</view>
		</view>
	</view>

</template>

<script>
	var _that
	export default {
		data() {
			return {
				goodslist:[
					{
						id:0,
						goodsimg:'../../../../static/my/goodsimg.png',
						goodsname:'新思维早启蒙 情境思维数学 童年教育',
						goodsprice:'9.9'
					},
					{
						id:1,
						goodsimg:'../../../../static/my/goodsimg.png',
						goodsname:'新思维早启蒙 情境思维数学 童年教育',
						goodsprice:'9.9'
					}
				],
				qh_id:1
			}
		},
		onLoad() {
			_that = this
		},
		methods: {
			qiehuan(e){
				_that.qh_id = e
			},
			xq(item){
				uni.navigateTo({
					url: '/pages/index/home/goods_details'
				});
			},
			jieshao(){
				uni.navigateTo({
					url: '/pages/index/my/myshop/shop_introduce'
				});
			}
		}
	}
</script>

<style>
	.content {
		width: 750rpx;
		height: 100vh;
		background: #FAFAFA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding-bottom: 200rpx;
	}

	.header {
		width: 750rpx;
		height: 208rpx;
		background: linear-gradient(180deg, #DCEDFF 0%, #F8FCFF 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header_top {
		display: flex;
		align-items: center;
		padding-top: 32rpx;
		padding-left: 64rpx;
	}

	.header_top image {
		width: 88rpx;
		height: 88rpx;
	}

	.header_top text {
		margin-left: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.header_bottom {
		display: flex;
		padding-left: 64rpx;
		margin-top: 24rpx;
	}

	.header_bottom_xl {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.header_bottom_xs {
		margin-left: 48rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.search {
		width: 750rpx;
		height: 244rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.search_top {
		display: flex;
		padding-top: 36rpx;
		padding-left: 30rpx;
	}

	.search_top_left {
		display: flex;
		align-items: center;
		width: 560rpx;
		height: 80rpx;
		background: #F2F2F2;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.search_top_left image {
		width: 34rpx;
		height: 34rpx;
		margin-left: 28rpx;
		margin-right: 30rpx;
	}

	.search_top_left input {}

	.search_top_right {
		display: flex;
		align-items: center;
		margin-left: 40rpx;
	}

	.search_top_right image {
		width: 64rpx;
		height: 64rpx;
	}

	.search_bottom {
		display: flex;
		padding-left: 30rpx;
		padding-right: 204rpx;
		margin-top: 48rpx;

	}

	.search_bottom_type {
		margin: auto;
	}

	.search_bottom_type text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #666666;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.acticee text {
		color: #409CFD;
	}
	.goods_list {
		width: 690rpx;
		height: 224rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		margin: 16rpx auto 16rpx;
	}

	.goods_list_left {
		margin-left: 32rpx;
	}

	.goods_list_left image {
		width: 160rpx;
		height: 160rpx;
	}

	.goods_list_right {
		margin-left: 16rpx;
	}

	.goods_list_right_top {
		width: 468rpx;
		height: 80rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.goods_list_right_bottom {
		height: 80rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #409CFD;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		display: table-cell;
		vertical-align: bottom;
		padding-bottom: 10rpx;
	}

	.goods_list_right_bottom text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #409CFD;
		line-height: 33rpx;
	

	}
	.dibu_two_icon{ display: flex; justify-content: space-around; bottom: 0px; left: 0px; width: 100%; height: 166rpx; padding-bottom: 30rpx; position: fixed;}
	.dibu_two_icon .item{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
	.dibu_two_icon .item text{ font-size: 20rpx; color: #409CFD;}
</style>